<template>
  <el-card class="material-management">
    <!-- 搜索区域 -->
    <div class="search-bar">
      <el-select
        v-model="searchForm.type"
        placeholder="请选择物资类型"
        style="width: 150px; margin-right: 10px"
      >
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="searchForm.name"
        placeholder="请输入物资名称"
        style="width: 200px; margin-right: 10px"
      />
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </div>

    <!-- 库存物资表格 -->
    <div class="table-section">
      <h4>库存物资</h4>
      <el-table :data="stockTableData" border style="width: 100%">
        <el-table-column prop="name" label="物资名称" align="center" />
        <el-table-column prop="type" label="物资类型" align="center" />
        <el-table-column prop="stock" label="库存" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleStockOperate(scope.row)"
              >调配</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 已调配物资表格 -->
    <div class="table-section">
      <h4>已调配物资</h4>
      <el-table :data="allocatedTableData" border style="width: 100%">
        <el-table-column prop="name" label="物资名称" align="center" />
        <el-table-column prop="source" label="物资来源" align="center" />
        <el-table-column prop="address" label="物资地址" align="center" />
        <el-table-column prop="contact" label="联系人" align="center" />
        <el-table-column prop="phone" label="联系电话" align="center" />
        <el-table-column prop="dispatchTime" label="调度时间" align="center" />
        <el-table-column
          prop="preDispatchNum"
          label="调度前数量"
          align="center"
        />
        <el-table-column prop="dispatchNum" label="调度数量" align="center" />
        <el-table-column prop="spec" label="量纲" align="center" />
        <el-table-column prop="dispatcher" label="调度人员" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleAllocatedOperate(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "MaterialManagement",
  props: {
    // 物资类型下拉选项（外部传入，支持动态配置）
    typeOptions: {
      type: Array,
      default: () => [
        { label: "请选择物资类型", value: "" },
        { label: "建筑材料", value: "building" },
        { label: "机械设备", value: "equipment" },
        { label: "办公用品", value: "office" },
      ],
    },
  },
  data() {
    return {
      // 搜索表单
      searchForm: {
        type: "",
        name: "",
      },
      // 库存物资表格数据
      stockTableData: [],
      // 已调配物资表格数据
      allocatedTableData: [],
    };
  },
  mounted() {
    // 初始化时加载默认数据（实际项目中可替换为接口请求）
    this.stockTableData = [
      { name: "钢筋", type: "建筑材料", stock: "500吨" },
      { name: "起重机", type: "机械设备", stock: "10台" },
      { name: "打印纸", type: "办公用品", stock: "20箱" },
    ];
    this.allocatedTableData = []; // 初始无数据
  },
  methods: {
    // 执行查询操作（实际项目中对接接口）
    handleSearch() {
      console.log("查询条件：", this.searchForm);
      // 这里可添加接口请求逻辑，更新 stockTableData
    },
    // 库存物资操作（如“调配”）
    handleStockOperate(row) {
      console.log("调配物资：", row);
      // 实际项目中可打开调配弹框，处理后续逻辑
    },
    // 已调配物资操作（如“详情”）
    handleAllocatedOperate(row) {
      console.log("查看调配详情：", row);
      // 实际项目中可打开详情弹框
    },
  },
};
</script>

<style lang="scss" scoped>
.material-management {
  padding: 15px;

  .search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .table-section {
    margin-bottom: 20px;

    h4 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
    }
  }
}
</style>
